/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

@keyframes video-fade-in {
  to {
    opacity: 1;
  }
}

.video-calling-wrapper {
  position: relative;
  z-index: @z-index-video;
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: var(--app-bg-secondary);

  &.app--small-offset {
    height: calc(100vh - 32px);
  }

  &.app--large-offset {
    height: calc(100vh - 64px);
  }
}

.video-calling {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #323739;
}

// common
.video-element-overlay {
  .full-screen;
  .flex-center;

  background-color: fade(#000, 24%);
  color: #fff;
  pointer-events: none;
}

.video-element-remote {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 4px 0 4px;
  // fade in animation
  animation: video-fade-in var(--animation-timing-slower) var(--ease-out-quart) forwards;
  background-color: var(--app-bg-secondary);
  opacity: 0;

  @media (min-width: 640px) {
    padding-bottom: 8px;
  }
}

.video-element-remote-participant {
  .flex-center;

  height: 100%;
  background: #fff;
}

.video-message {
  .full-screen;
  .flex-center;

  color: #fff;
}

.video-title {
  display: flex;
  align-items: baseline;
  justify-content: center;

  @media (min-width: 640px) {
    grid-column: 2;
    justify-self: center;
  }

  &__info-bar {
    .label-small-medium;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: var(--accent-color);
    color: var(--app-bg-secondary);
  }
}

.video-remote-name {
  display: flex;
  flex-direction: column;

  @media (min-width: 640px) {
    align-items: center;
  }
}

.video-remote-title {
  .heading-h3;
  overflow: hidden;
  max-width: 400px;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-controls {
  .list-unstyled;
  position: relative;
  width: 100%;
  background-color: var(--app-bg-secondary);
  transition: opacity 0.25s ease-in-out;

  &__item {
    position: relative;

    & button {
      vertical-align: middle;
    }
  }

  &__centered-items {
    display: flex;
    gap: 24px;

    @media (max-width: 639px) {
      gap: 16px;
    }
  }

  &__fit-info {
    width: 100%;
    color: #fff;
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-regular);
    text-align: center;
    text-transform: uppercase;
  }

  &__item__minimize {
    display: flex;
  }

  &__view-mode div[class$='-Control'] {
    display: none;
  }

  &__button_primary {
    position: relative;
    .button-icon-primary;

    @media (max-width: 639px) {
      width: 48px;
    }
  }

  &__button {
    .button-reset-default;
    position: relative;
    display: flex;
    width: 68px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    cursor: pointer;
    line-height: 0;

    @media (max-width: 639px) {
      width: 48px;
    }

    &--small {
      width: 40px;
      border-radius: 12px;
    }

    &__label {
      position: absolute;
      bottom: -16px;
      left: 50%;
      margin: 0;
      color: var(--main-color);
      font-size: 11px;
      font-weight: var(--font-weight-regular);
      transform: translateX(-50%);
      white-space: nowrap;
    }

    &:focus-visible {
      outline: 2px solid var(--accent-color-focus);
    }

    &--red {
      border: 1px solid var(--red-500);
      background-color: var(--red-500);
      svg > path {
        fill: var(--app-bg-secondary);
      }
      &:hover {
        background-color: #9b000f;
        body.theme-dark & {
          background-color: #ff928d;
        }
        &:active {
          border: 1px solid #74000b;
          background-color: var(--red-500);
          body.theme-dark & {
            border: 1px solid #ffc9c6;
            background-color: var(--red-500);
          }
        }
      }
    }
  }
}

.video-calling {
  .emoji {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation:
      flyUp 2.5s linear forwards,
      fadeIn 1s;
    font-size: 2rem;
    gap: 0.1rem;

    @media (min-height: 1070) {
      animation:
        flyUp 3.5s linear forwards,
        fadeIn 1s;
    }
  }

  .emoji-text {
    padding: 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.8);

    color: white;
    font-size: 0.75rem;

    font-size: bold;
    font-weight: bold;
  }

  @keyframes flyUp {
    0% {
      bottom: 5%;
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      bottom: 80%;
      opacity: 0;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

.video-controls .video-element-dark {
  color: #fff;
}

.device-toggle-button {
  .button-reset-default;
  position: absolute;
  top: -5px;
  left: 60px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--inactive-call-button-border);
  border-radius: 50%;
  margin-bottom: 30px;
  background-color: var(--inactive-call-button-bg);
  cursor: pointer;
  line-height: 0;
  > svg {
    fill: var(--main-color);
  }
}
